<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="WEB-INF/head/validator.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>添加页面</title>
	<style type="text/css">
	.message{
color:red;
}
	</style>
	<script type="text/javascript">
    $(function () {
        $(".datepicker").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
            todayBtn: true,//今日按钮
            format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
        });
	    //数据验证
	    $("form").bootstrapValidator({
	        message:'This value is not valid',
//	        定义未通过验证的状态图标

	        feedbackIcons: {/*输入框不同状态，显示图片的样式*/
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        },
//	        字段验证

	        fields:{
//	           姓名

	            personName:{
	                message:'姓名非法',
	                validators:{
//	                    非空

	                    notEmpty:{
	                        message:'姓名不能为空'
	                    },
//	                    限制字符串长度

	                    stringLength:{
	                        min:2,
	                        max:10,
	                        message:'姓名长度必须位于2到10之间'
	                    },
//	                    基于正则表达是的验证

	                    regexp:{
	                        regexp:/^[\u4e00-\u9fa5]{2,10}$/,
	                        message:'姓名由汉字组成'
	                    }
	                }
	            },
	            
//	          身份证号码
	            identityNumber:{
	                message:'身份证号码非法',
	                validators:{
//	                    非空

	                    notEmpty:{
	                        message:'身份证号码不能为空'
	                    },
//	                    限制字符串长度

	                    stringLength:{
	                        min:18,
	                        max:18,
	                        message:'身份证号码长度必须为18位数字'
	                    },
//	                  基于正则表达是的验证

	                    regexp:{
	                    	regexp:/^[a-zA-Z0-9]+$/,
	                        message:'身份证号码由数字字母组成'
	                    },
	                    remote: {
	                        url: '/test/validateIDCard.do',
	                        message: '身份证号码已存在',
	                        type: 'POST',
	                        data:{
	                     	
	                        	  id: function(){ return $("#id").val(); }
	                         }
	                     },
	                   
	                }
	            },
	            
	              gender:{
	                  validators:{
	                      notEmpty:{
	                          message:'请选择性别'
	                      },
	                  }
	              },
	              
	              maritalStatus:{
	                  validators:{
	                      notEmpty:{
	                          message:'请选择婚姻状况'
	                      },
	                  }
	              },
	              
	              birthTime:{
	                  validators:{
	                      notEmpty:{
	                          message:'请输入出生日期'
	                      },
	                      remote: {
	                          url: '/test/validateBirthTime.do',
	                          message: '日期不合法',
	                          type: 'POST',
	                       },
	                   
	                  }
	              },
	              
//	            配偶姓名

	              spouseName:{
	                  message:'配偶姓名非法',
	                  validators:{
//	                      限制字符串长度

	                      stringLength:{
	                          min:2,
	                          max:10,
	                          message:'配偶姓名长度必须位于2到10之间'
	                      },
//	                      基于正则表达是的验证

	                      regexp:{
	                          regexp:/^[\u4e00-\u9fa5]{2,10}$/,
	                          message:'配偶姓名由汉字组成'
	                      }
	                  }
	              },
	        }
	    })
	    
		$('#birthTime').datepicker({
			format: 'yyyy-mm-dd',
			language:  "zh-CN",  
		    todayBtn : "linked",  
		    autoclose : true,  
		    todayHighlight : true,  
		    clearBtn:true,  
		    }).on('changeDate',function(e) {  
		        $('#updateForm').data('bootstrapValidator')
		        .updateStatus('birthTime', 'NOT_VALIDATED',null)  
		        .validateField('birthTime');  
		});  
	    
	    
	})
</script>
</head>
<body>
					<form class="form-horizontal" action="/test/addPerson.do" method="post"   >
						<div class="form-group">
       				<label for="personName" class="col-md-2 control-label">姓名</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="personName" name="personName"  placeholder="请输入姓名"value="">
  					</div>
 			 </div>
 			 
 			 <div class="form-group">
       				<label for="birthTime" class="col-md-2 control-label">出生日期</label>
  					<div class="col-md-7">
							<input type="text"  name="birthTime" id="birthTime" class="form-control" value="" readonly placeholder="请输入出生日期"/>
  					</div>
 			 </div>
 			 			
			  <div class="form-group">
       				<label for="identityNumber" class="col-md-2 control-label">身份证号码</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="identityNumber" name="identityNumber"  maxlength="18"placeholder="请输入身份证号码"value="">
  					</div>
 			 </div>
 			 
			<div class="form-group">
				<label for="gender" class="col-md-2 control-label">性别</label> 
				<div class="col-md-7">
					<input type="hidden" id="gender2" value=""/> 
					          <select class="form-control" id="gender" name="gender" style="width: 200px;">
					          		<option value="">请选择性别</option>
					          		<option value="0">未知的性别</option>
					          		<option value="1">男</option>
					          		<option value="2">女</option>
					          		<option value="9">未说明的性别</option>
					          </select>
				</div>
			</div>
			<div class="form-group">
				<label for="maritalStatus" class="col-md-2 control-label">婚姻状况</label> 
				<div class="col-md-7 " >
					<input type="hidden" id="maritalStatus2" value=""/> 
					          <select class="form-control" id="maritalStatus" name="maritalStatus" style="width: 200px;">
					          		<option value="">请选择婚姻状况</option>
					          		<option value="10">未婚</option>
					          		<option value="21">初婚</option>
					          		<option value="22">再婚</option>
					          		<option value="23">复婚</option>
					          		<option value="30">丧偶</option>
					          		<option value="40">离婚</option>
					          		<option value="90">未说明的婚姻状况</option>
					          </select>
				</div>
			</div>

			<div class="form-group">
       				<label for="spouseName" class="col-md-2 control-label">配偶姓名</label>
  					<div class="col-md-7">
       						<input type="text" class="form-control" id="spouse_name" name="spouseName" value="" placeholder="请输入配偶姓名"disabled="disabled">
  					</div>
 			 </div>

			<div class="form-inline col-md-offset-5">
				<button type="submit" class="btn btn-primary" > 保存并关闭 </button>
			</div>
		</form>
		<script>
		$("#maritalStatus").change(function(){
		$select = $(this);
		if(this.value=="10"||this.value=="90"||this.value==""){
			$("#spouse_name").prop('disabled', true);
		} else {
			$("#spouse_name").prop('disabled', false);
		}
		});
		</script>
</body>
</html>